<template>
  <div class="index">
    <!-- 添加卡片内容 -->
    <el-row :gutter="20">
      <el-col :span="16" :offset="4">
        <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-button>默认按钮</el-button>
      </el-col>
    </el-row>
    <br>
    <!-- 主体部分 -->
    <el-row>
      <el-col :span="6">
        adawd
      </el-col>
      <el-col :span="12" :style="autoHeight" class="v-data">
        <el-timeline >
          <el-timeline-item v-for="(item, index) in listData" :key="index" :timestamp="item.updateTime | formatDate" placement="top" color="red">
            <el-card class="el-card">
              <h4 v-html="keepTextStyle(item.content)"></h4>
              <p><span class="v-tag">{{item.tag}}</span></p> 
              <!-- {{item.author}} -->
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-col>
      <el-col :span="6">
        右边
        <button  @click="btnchan()">userid - 2</button>
      </el-col>

    </el-row>


  </div>
</template>

<script>
  import { listVData } from '@/api/index.js'
  import _ from 'lodash'
  let windowHeight = parseInt(window.innerHeight);

  export default {
    name: 'index',
    inject: ['reload'],//在根节点上写  
    data() {
      return {
        userid:1,
        websock: null,
        input: '',
        requsetNum: 0,
        intervalId: null,
        listData: [],
        windowHeight: windowHeight,
        autoHeight: {
          overflow: "auto",
          background: " border-radius: 10px",
          height: "300px",
        },
      }
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
    },
    mounted() {
      // 页面高度变化
      window.addEventListener("resize", this.getHeight);
      this.getHeight();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
      window.removeEventListener("resize", this.getHeight);
      // 在页面销毁后，清除计时器
      this.clear();
    },
    created() {
      this.initWebSocket();
      this.getlist();
      // this.dataRefreh();
    },
    methods: {
      btnchan(){
        this.userid = 2;
        this.initWebSocket();
      },
      initWebSocket(){ //初始化weosocket
        console.log("初始化weosocket");
        const wsuri = "ws://127.0.0.1:80/ws/one/"+this.userid;
        this.websock = new WebSocket(wsuri);
        this.websock.onopen = this.websocketonopen;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        console.log("websocket-连接成功")
        let data = {"userid":this.userid,"page":"1","size":"20","isend":"1"};
        this.websocketsend(JSON.stringify(data));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
        console.log("ws--数据接收")
        this.listData = redata.data.records;
        console.log(redata)
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
      dataRefreh() {  // 定时刷新数据函数
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
          let _that = this;
          setTimeout(
            function () {
              _that.getlist(); //加载数据函数
              console.log("刷新" + new Date());
            }, 0);

        }, 3000);
      },
      // 停止定时器
      clear() {
        clearInterval(this.intervalId); //清除计时器
        this.intervalId = null; //设置为null
      },
      getHeight() {
        this.autoHeight.height = windowHeight - 50 + "px";
      },
      getlist() { // 初始化数据
        listVData("1", "1").then(res => {
          this.listData = res.data.data.records;
          console.log(this.listData);
          // setTimeout(this.getlist(), 100);//给点延时 减少请求的频率
        }).catch(() => {
          console.log("请求失败");
          this.requsetNum += 1;
          if (this.requsetNum <= 7) {
            setTimeout(this.getlist(), 10000);//给点延时 减少请求的频率
          }
        })
      },
      // 正则表达式解析内容格式
      keepTextStyle(val) {
        return val.replace(/\n/g, "<br/>")
      },
    },
  }
</script>
<style scoped>
  .v-tag{
    font-weight: bold;
    background: #ffebd2;
    border-radius: 5px;
    padding: 2px 2px 3px 3px;
  }
  .v-data {
    max-height: 800px;
  }
  .el-card__body>h4{
    font-size: 13px;
    line-height: 2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;
    max-height: 200px;
  }
  /* 定义滑块 内阴影+圆角 */
  .v-data::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 103, 129, 0.281);
    background-color: rgba(0, 103, 129, 0.281);
  }

  .v-data::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  .v-data::-webkit-scrollbar-track {
    color: rgb(85, 20, 204);
    border-radius: 10px;
    background-color: rgba(54, 204, 41, 0);
  }

  .v-data::-webkit-scrollbar {
    width: 4px;
  }
</style>